<template>
  <div>
    <div>
      <el-button type="primary" size="medium" @click="showOfficalComment('')">发布官方点评</el-button>
    </div>

    <!-- 列表 -->
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="phone"
        label="评论内容"
        min-width="120"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span @click.stop="showComment(scope.row)"
                style="cursor:pointer;color:#409EFF;width:100%;whiteSpace:nowrap;overflow:hidden;textOverflow:ellipsis">{{scope.row.content}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="comment_type_name" label="评论/回复" min-width="80">
        <template slot-scope="scope">
          <el-tag type="danger" v-if="scope.row.comment_type_name=='回复'">{{scope.row.comment_type_name}}</el-tag>
          <el-tag type="warning" v-else>{{scope.row.comment_type_name}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="用户"
        min-width="180">
        <template slot-scope="scope" v-if="scope.row.user_info">
          <div>{{scope.row.user_info.realname?scope.row.user_info.realname:scope.row.user_info.nickname}}</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="date"
        label="头像"
        min-width="100">
        <template slot-scope="scope">
          <div v-if="scope.row.user_info">
            <img :src="scope.row.user_info.photo_url" alt=""
                 style="width:60px;border-radius:50%;height:60px;object-fit:cover">
          </div>
        </template>
      </el-table-column>


      <el-table-column
        prop="like_num"
        label="点赞"
        min-width="50"
      >
      </el-table-column>
      <!-- <el-table-column
          prop="reply_num"
          label="回复"
          width="50"
          >
      </el-table-column> -->
      <el-table-column
        prop="created_at"
        label="提交时间"
        min-width="180"
      >
      </el-table-column>
      <el-table-column
        prop="status"
        label="审核状态"
        min-width="100"
      >
        <template slot-scope="scope">
          <div>
            <el-tag v-show="scope.row.status==0">未审核</el-tag>
            <el-tag type="success" v-show="scope.row.status==1">已通过</el-tag>
            <el-tag type="info" v-show="scope.row.status==2">已拒绝</el-tag>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="审核" min-width='200'>
        <template slot-scope="scope">
          <div v-show="scope.row.status==0">
            <el-button size="mini" type='primary' @click="passComment(scope.row.id)">通过</el-button>
            <el-button size="mini" type='danger' @click="denyComment(scope.row.id)">拒绝</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="删除" min-width='100'>
        <template slot-scope="scope">
          <el-button size="mini" type='danger' @click="deleteComment(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <el-col :span="24" class="footer-bar">
      <div class="page-code">
        <el-pagination
          background
          :page-size="16"
          layout="prev, pager, next"
          :total="totalPage"
          @current-change="pageChange"
        >
        </el-pagination>
      </div>
    </el-col>
    <!-- 列表end -->

    <!-- 官方评论弹窗 -->
    <el-dialog title="官方评论" :visible.sync="officalCommentVisible" @close="initData">
      <el-input type="textarea" v-model="comment"></el-input>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submit">发布</el-button>
      </div>
    </el-dialog>
    <!-- 官方评论弹窗end -->

    <!-- 评论弹窗 -->
    <el-dialog title="评论" :visible.sync="commentVisible" @close="initData">
      <div>{{comment}}</div>
    </el-dialog>
    <!-- 评论弹窗end -->
  </div>
</template>
<script>
  export default {
    name: 'member',
    data() {
      return {
        comment: '',
        officalCommentVisible: false,//编辑官方评论弹窗状态
        commentVisible: false,
        userAuthId: '',//选中的用户id

        tableData: [{}],
        page: 1,
        totalPage: 0
      }
    },
    watch: {},
    methods: {
      search() {
        this.page = 1;
        this.getNewsComment()
      },
      async getNewsComment() {
        //获取会员列表
        let params = {
          news_id: this.id,
          page: this.page,
          limit: 16,
          keyword: this.searchText
        }
        let res = await this.$api.getNewsComment(
          params);
        if (res.data.level == 'success') {
          this.tableData = res.data.data;
          this.totalPage = res.data.page_info.total;
        }
      },
      pageChange(e) {
        //翻页
        this.page = e;
        this.getNewsComment();
      },
      async submit() {
        let params = {
          news_id: this.id,
          content: this.comment
        }
        let res = await this.$api.sendOfficialComment(params)
        if (res.data.level == 'success') {
          this.$message({
            type: 'success',
            message: res.data.message
          })
          this.officalCommentVisible = false;
          this.getNewsComment();

        } else {
          this.$message({
            type: 'error',
            message: res.data.message
          })


        }
      },
      showOfficalComment() {
        //填写官方评论
        this.officalCommentVisible = true
      },
      showComment(scope) {
        //显示用户评论
        this.comment = scope.content
        this.commentVisible = true
      },
      async deleteComment(id, flag) {
        //删除评论
        let judge = null;
        let tit = '删除该评论?'
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          this.delCommentHandle(id)
        }
        console.log(judge)
      },
      async delCommentHandle(id) {
        let res = await this.$api.delComment({id: id});
        if (res.data.level == 'success') {
          this.$message.success(res.data.message);
          this.getNewsComment()
        } else {
          this.$message.error(res.data.message);
        }
      },


      async passComment(id) {
        //通过审核
        let judge = null;
        let tit = '通过该评论?';
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          this.reviewComment(1, id)
        }
        console.log(judge)
      },
      async denyComment(id) {
        //拒绝审核
        let judge = null;
        let tit = '拒绝该评论?';
        try {
          judge = await this.$confirm(tit, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
        } catch (error) {
          judge = 'cancel'
        }
        if (judge == 'confirm') {
          this.reviewComment(2, id)
        }
        console.log(judge)
      },
      async reviewComment(type, id) {
        let params = {
          comment_id: id,
          type: type
        }
        let res = await this.$api.reviewComment(params)
        if (res.data.level == 'success') {
          this.$message.success(res.data.message);
          this.getNewsComment()
        } else {
          this.$message.error(res.data.message);
        }
      },

      initData() {
        this.comment = ''
      }

    },
    mounted() {
      this.id = this.$route.query.id;
      this.getNewsComment()
    },
  }
</script>
<style lang="scss" scoped>
  .screen {
    margin-top: -10px !important;
  }

  .action-bar-wrapper {
    position: sticky;
    z-index: 1;
    top: -10px;
  }

  .action-bar {
    background-color: #f2f2f2;

    height: 60px;
    margin: 10px 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;

    .action-bar-input {
      width: 250px;
      margin-right: 14px;
    }

    .task-form-text {
      color: #666666;
    }
  }

  .el-table-style {
    width: 100%;
    border: 1px solid #f2f2f2;
  }

  .footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    padding: 8px;
    margin: 10px 0px;
    box-sizing: border-box;
  }

  .dialog-footer {
    text-align: center;
  }

  .executorList {
    display: flex;
    flex-wrap: wrap;

    div {
      margin: 10px;
      border: 1px solid #eee;
      border-radius: 5px;
      padding: 5px 10px;
    }
  }
</style>
